<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>电商大数据管理平台</title>
		<link rel="icon" href="icon.ico">
		<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="plugins/element-ui/theme-default/index.css" />
		<link rel="stylesheet" href="css/dashboard.css">
		<!--[if lt IE 9]>
	    <script src="plugins/html5shiv/html5shiv.min.js"></script>
	    <script src="plugins/respond/respond.min.js"></script>
	    <![endif]-->
	    <style>
	    	
	    	body{
	    		background-color: #f6f7fb;
	    		height: 100%;
	    		width: 100%;
	    	}
	    	.content{
	    		width: 48%;
	    		position: absolute;
	    		right: 60px;
	    		top: 14%;
	    		height: 67%;
	    		background: white;
	    		border-radius:6px ;
	    		box-shadow: 0 0 100px rgba(0,0,0,0.2);
	    		z-index: 100;
	    		overflow: hidden;
	    	}
	    	.login-bg{
	    		width: 46%;
	    		position: absolute;
	    		z-index: 1;
	    		right: 30%;
	    		top: 8%;
	    	}
	    	.login-left{
	    		width: 47%;
	    		float: left;
	    		padding: 7%;
	    		height: 100%;
	    		position: relative;
	    	}
	    	.login-tit{
	    		width: 58%;
	    		margin-top: 7%;
	    		display: block;
	    	}
	    	.login-right{
	    		width: 53%;
	    		float: left;
	    		height: 100%;
	    		background-color: #323232;
	    		box-shadow: -4px 0px 20px rgba(0,0,0,0.1);
	    		border-radius: 4px;
	    		overflow: hidden;
	    	}
	    	.login-right img{
	    		width: 100%;
	    		height: 100%;
	    	}
	    	.shuru{
	    		margin-top: 26%;
	    	}
	    	.bottomtxt{
	    		margin-top:20%;
	    		color: #333;
	    		text-align: center;
	    	}
	    	.cricle{
	    		display: block;
	    		position: absolute;
	    		width: 36px;
	    		height: 36px;
	    		border-radius: 50%;
	    		border: 10px solid #fd6481;
	    		top: 24%;
	    		right: 20%;
	    	}
	    	.el-carousel{
	    		height: 100%;
	    	}
	    	.el-carousel__container{
	    		height: 100% !important;
	    	}
	    	.el-button{
	    		box-shadow: 0 4px 10px rgba(44,132,250,0.8) !important;
	    	}
	    	.el-form-item{
	    		margin-bottom: 7%;
	    	}
	    	@media (max-width: 1336px) {
	    		.content{
	    			top: 14%;
	    			width: 56%;
	    		}
	    		.login-left{
	    			width:49%;
	    			padding: 6%;
	    		}
	    		.login-right{
	    			width: 51%;
	    		}
	    	}
	    </style>
	</head>

	<body >
		<div id="app">
		<img class="login-bg" src="images/bigdata.png" />
		<div class="content">
			<div class="login-left">
				<img class="login-tit" src="images/tittle.png" />
				<div class="shuru">
				<el-form ref="params" :model="params" :rules="rules">
							<!--用户名-->
							<el-form-item prop="loginName">
								<el-input placeholder="输入手机号/用户名" v-model="params.loginName" size="large">
									<template slot="prepend"><i class="fa fa-user fa-fw"></i></template>
								</el-input>
							</el-form-item>
							<!--密码-->
							<el-form-item prop="loginSecret">
								<el-input placeholder="请输入密码" type="password" size="large" v-model="params.loginSecret">
									<template slot="prepend"><i class="fa fa-lock fa-fw"></i></template>
								</el-input>
							</el-form-item>
							<!--记住账号，默认不勾选-->
							<div>
								<el-switch
								  v-model="params.isSaveAccount"
								  @change="isSaveAccountD()"
								  on-color="#20a0ff"
								  off-color="#ff4949">
								</el-switch>

								<!--<el-checkbox v-model="isSaveAccount">记住账号</el-checkbox>-->
								<div href="#" class="pull-right text-muted">记住账号</div>
							</div>
							<!--登录按钮-->
							<el-form-item>
								<el-button size="large" type="primary" style="width: 100%;margin-top: 10px;" @click="submitForm('params')" :loading="isSubmiting">登陆</el-button>
							</el-form-item>
							
						</el-form>
				</div>
				<div class="bottomtxt">
					专业电商大数据管理平台
				</div>
				<span class="cricle"></span>
			</div>
			<div class="login-right">
				<!--<img src="images/right1.png" />-->
				 <el-carousel arrow="never" interval="5000">
			      <el-carousel-item v-for="item in images">
			        <img :src="item" />
			      </el-carousel-item>
			   </el-carousel>
			</div>
			
		</div>
		
		</div>

		
	</body>
		<script src="plugins/jquery/jquery.min.js"></script>
		<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="js/ie10-viewport-bug-workaround.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script src="plugins/element-ui/index.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					//登录接口参数
					params: {
						clientId:'',
						loginName: '',
						loginSecret: '',
						verifyCode:'',
						isSaveAccount:false
					},
					userData:{},
					images:['images/right1.png','images/right3.png'],
					//表单验证规则
					
					//登录按钮状态变化
					isSubmiting: false,
					//跳转保留
					redirect: null
				},
				mounted: function() {
					var vm = this;
					if(localStorage.isSaveAccount == 'true'){
						vm.params.isSaveAccount = true;
						vm.params.loginName = localStorage.loginName;	
					}
						
				},
				methods: {
					 isSaveAccountD: function () {
				      if(this.params.isSaveAccount == true){
				      	localStorage.loginName = this.params.loginName;
				      	localStorage.isSaveAccount = true;
				      	this.params.isSaveAccount = true;
				      }else{
				      	localStorage.loginName = "";
				      	localStorage.isSaveAccount = false;
				      	this.params.isSaveAccount = false;
				      }
				    },
					submitForm:function(formName) {
						this.isSubmiting = true;
						var vm = this;
							if(vm.params.loginName != ""){
								$.ajax({
								type:"post",
								url:"auth/login/",
								data:JSON.stringify(vm.params),
								contentType: "application/json",
								success: function(data) {
									vm.userData = data;
									vm.isSubmiting = false;
									vm.saveData();
									window.location.href = "index.html"
									console.log(data)
								},
								error: function(err) {
									var meg = "";
									if(err.status == 400){
										meg = "账号错误";
									}else if(err.status == 500){
										meg = "密码错误";
									}
									vm.$message({
							          showClose: true,
							          message: meg,
							          type: 'error'
							        });
									vm.isSubmiting = false;
									console.log(err.status);
								}
							});
							}else{
								vm.$message({
							          showClose: true,
							          message: "请输入账号密码！",
							          type: 'warning'
							        });
							    vm.isSubmiting = false;
							}
					},
					saveData:function(){
						sessionStorage.openid = this.userData.openid;
						if(this.params.isSaveAccount==true){
							localStorage.loginName = this.params.loginName;
						}else{
							localStorage.loginName = "";
						}
					}

				}
			});
	</script>
</html>